import React from 'react';
import styles from './_layout.less';
import { Link, useSelector, IndexModelState, useLocation ,useHistory} from 'umi';
import { Layout, Menu,Button} from 'antd';
import { menulist } from '../../utils/menu'
import { removeCookies } from '../../utils/cook'
import img from '../../utils/2.png'
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
interface Iprops {
  children: any
}
let Mainpage: React.FC<Iprops> = function (props) {


  let { difflist ,name} = useSelector((module: { login: IndexModelState }) => module.login)
  let { pathname } = useLocation()
  let defaulttop: any = menulist.find(item => {
    return item.children.findIndex(v => v.path === pathname) != -1
  })

  let history=useHistory()
  return (
    <div className={styles.title}>
      <Layout style={{ width: "100%", height: "100%" }}>
        <Header className="header" style={{ backgroundColor: "#fff", height: "90px", color: "#000", borderBottom: "1px solid #ccc" }}>
         <div className={styles.h}>
         <h3><img src={img} alt="" /></h3>  <div><span></span> <h2>{name}</h2>  <Button type="primary" onClick={()=>{
            history.push("/login")
             removeCookies("token",{path:"/"})
         }}>退出</Button></div>
        </div> 
        </Header>
        <Layout>
          <Sider width={270} >
            <Menu
              mode="inline"
              defaultSelectedKeys={[pathname]}
              defaultOpenKeys={[defaulttop ? defaulttop.title : "用户管理"]}
              style={{ height: '100%', borderRight: 0, width: '100%' }}
              theme="dark"
            >
              {difflist.map(item =>{
               return  item.children.length && <SubMenu key={item.title} icon={<item.meta.icon />} title={item.title} style={{ width: '100%',fontSize:'16px',margin:"15px 0"}}>
                {item.children.map(v =>v.meta.isShow===true? <Menu.Item key={v.path} style={{ width: '100%',fontSize:'16px'}}><Link to={v.path}>{v.title}</Link></Menu.Item>:<></>)}
              </SubMenu>
              })}
            </Menu>
          </Sider>
          <Layout>
            <Content
              className="site-layout-background"
              style={{
                backgroundColor: "#fff"
              }}
            >
              <div className={styles.con}>{props.children}</div>
            </Content>
          </Layout>
        </Layout>
      </Layout>

    </div>
  );
}


export default Mainpage